{% extends 'base/base.html' %}

{% block title %}联系我们 - 盲盒商城{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-3">
            <!-- 侧边栏导航 -->
            <div class="card mb-4">
                <div class="card-header"><h4 class="mb-0">帮助中心</h4></div>
                <div class="list-group list-group-flush">
                    <a href="/help/faq/" class="list-group-item list-group-item-action">常见问题</a>
                    <a href="/help/#shopping" class="list-group-item list-group-item-action">购物指南</a>
                    <a href="/help/#payment" class="list-group-item list-group-item-action">支付问题</a>
                    <a href="/help/#shipping" class="list-group-item list-group-item-action">配送问题</a>
                    <a href="/help/contact/" class="list-group-item list-group-item-action active">联系我们</a>
                    <a href="/help/about/" class="list-group-item list-group-item-action">关于我们</a>
                    <a href="/help/terms/" class="list-group-item list-group-item-action">服务条款</a>
                    <a href="/help/privacy/" class="list-group-item list-group-item-action">隐私政策</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <!-- 联系方式 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="mb-0">联系方式</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>客服热线</h5>
                            <p class="mb-4"><i class="fas fa-phone me-2"></i> 400-123-4567（周一至周日 9:00-22:00）</p>
                            
                            <h5>客服邮箱</h5>
                            <p class="mb-4"><i class="fas fa-envelope me-2"></i> support@blindbox.com</p>
                            
                            <h5>公司地址</h5>
                            <p class="mb-4"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区盲盒大厦15层</p>
                        </div>
                        
                        <div class="col-md-6">
                            <h5>社交媒体</h5>
                            <p>
                                <a href="#" class="btn btn-outline-primary me-2"><i class="fab fa-weibo"></i> 微博</a>
                                <a href="#" class="btn btn-outline-success me-2"><i class="fab fa-weixin"></i> 微信</a>
                                <a href="#" class="btn btn-outline-danger"><i class="fab fa-tiktok"></i> 抖音</a>
                            </p>
                            
                            <h5 class="mt-4">智能客服</h5>
                            <p>使用我们的智能聊天机器人获取即时帮助：</p>
                            <a href="/chatbot/" class="btn btn-primary"><i class="fas fa-robot me-2"></i> 咨询智能客服</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 联系表单 -->
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">在线留言</h4>
                </div>
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label for="name" class="form-label">您的姓名</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="email" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="subject" class="form-label">主题</label>
                            <select class="form-select" id="subject" required>
                                <option value="" selected disabled>请选择问题类型</option>
                                <option value="order">订单问题</option>
                                <option value="payment">支付问题</option>
                                <option value="shipping">配送问题</option>
                                <option value="product">商品问题</option>
                                <option value="refund">退款/退货</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="message" class="form-label">留言内容</label>
                            <textarea class="form-control" id="message" rows="5" required></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">提交留言</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 